<template>
	<view class="resume-container">
		<view class="resume-form">
			<view class="resume-form-item">
				<text class="label">称谓</text>
				<input class="input-text" v-model="form.relationship" type="text" placeholder="请填写称谓">
			</view>
			<view class="resume-form-item">
				<text class="label">姓名</text>
				<input class="input-text" v-model="form.name" type="text" placeholder="请填写姓名">
			</view>
			<view class="resume-form-item">
				<text class="label">年龄</text>
				<input class="input-text" v-model="form.age" type="text" placeholder="请填写年龄">
			</view>
			<view class="resume-form-item">
				<text class="label">政治面貌</text>
				<input class="input-text" v-model="form.political" type="text" placeholder="请填写政治面貌">
			</view>
			<view class="resume-form-item">
				<text class="label">工作单位及职务</text>
				<input class="input-text" v-model="form.work" type="text" placeholder="请填写工作单位及职务">
			</view>
			
		</view>
		<view class="add-form-btn">
			<!-- <button class="delete-btn" @tap="handleDelete" >删除</button> -->
			<button class="submit-btn" @tap="handleSubmit" >保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					relationship: '',
					name: '',
					age: '',
					political: '',
					work: ''
				},
			}
		},
		
		onLoad(option) {
		},
		methods: {
			handleSubmit() {
				let formData = JSON.stringify(this.form)
				console.log(formData, 123123)
				uni.redirectTo({
					url: `/subpage/examine/applyform?formData=${encodeURIComponent(formData)}`
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.resume-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 24rpx 32rpx;
		background: #F2F5FF;
		box-sizing: border-box;
	}
	.resume-form {
		width: 100%;
		padding: 18rpx 46rpx 36rpx;
		background: #FFFFFF;
		border-radius: 20px;
		box-sizing: border-box;
		.resume-form-item {
			display: flex;
			justify-content: space-between;
			padding: 32rpx 0;
			border-bottom: 2rpx solid rgba(52, 49, 79, 0.08);
			&.introduct {
				display: block;
				position: relative;
			}
			.label {
				display: block;
				font-weight: 400;
				font-size: 28rpx;
				color: #34314F;
				line-height: 20px;
			}
			.label-tip {
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(52, 49, 79, 0.7);
				line-height: 18px;
				text-align: left;
			}
			.input-text {
				position: relative;
				text-align: right;
				font-size: 26rpx;
				&.select {
					padding-right: 40rpx;
				}
				&.select::after {
					position: absolute;
					top: 50%;
					right: 0;
					display: block;
					width: 32rpx;
					height: 32rpx;
					transform: translateY(-50%);
					background: url('@/static/images/index/right-arrow.png') no-repeat center;
					background-size: 100% 100%;
					content: '';
				}
			}
			.textarea-text {
				width: 100%;
				height: 440rpx;
				padding: 24rpx 0;
				box-sizing: border-box;
				font-size: 26rpx;
			}
			.count {
				position: absolute;
				bottom: 16rpx;
				right: 20rpx;
				font-size: 24rpx;
				color: rgba(52, 49, 79, 0.4);
			}
			.add-btn {
				width: 40rpx;
				height: 40rpx;
				background: url('@/static/images/more.png') no-repeat center;
				background-size: 100% 100%;
			}
		}
		
	}
	.add-form-btn {
		// position: absolute;
		// bottom: 40rpx;
		// left: 32rpx;
		display: flex;
		margin: 44rpx 0;
		button {
			font-weight: 600;
			font-size: 32rpx;
			color: #34314F;
			line-height: 96rpx;
			text-align: center;
			border-radius: 20px;
			&::after {
				border: 0;
			}
		}
		.delete-btn {
			width: 268rpx;
			height: 96rpx;
			background-color: rgba(52, 49, 79, 0.06);
		}
		.submit-btn {
			width: 408rpx;
			height: 96rpx;
			margin-left: 28rpx;
			background: #FFDE6D;
		}
	}
</style>